<template>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="互联历史"
      width="1000px"
      @fullscreen="onFullscreen"
    >
      <BasicTable @register="registerTable" ref="selectTable" />
    </BasicModal>
  </template>
  <script lang="ts" setup>
    import { ref, nextTick, reactive } from 'vue';
    import { BasicModal, useModalInner } from '@/components/Modal';
    import { BasicTable, useTable, BasicColumn } from '@/components/Table';
    import { getConnectionList } from '@/api/connection';
    import { formatToDate, formatToDateTime } from '@/utils/dateUtil';
    import { connectionStateMap } from '@/enums/connection';

    const columns: BasicColumn[] = [
      {
        title: '状态',
        dataIndex: 'state',
        width: 80,
        customRender: ({ record }) => {
          return connectionStateMap[record.state];
        },
      },
      {
        title: '创建方式',
        dataIndex: 'wwexx_id',
        width: 80,
        customRender: ({ record }) => {
          return record.wwexx_id === null? '自建': '平台';
        },
      },
      {
        title: '开始时间',
        dataIndex: 'start_time',
        width: 100,
        customRender: ({ record }) => {
          if (record.start_time) {
            return formatToDate(record.start_time);
          };
          return '-';
        },
      },
      {
        title: '结束时间',
        dataIndex: 'end_time',
        width: 100,
        customRender: ({ record }) => {
          if (record.end_time) {
            return formatToDate(record.end_time);
          }
          return '-'
        },
      },
      {
        title: '我方授权书',
        dataIndex: 'our_side_certificate',
        width: 80,
        align: 'left',
        customRender: ({ record }) => {
          return record.our_side_certificate?.url? '已生成': '未生成'
        },
      },
      {
        title: '对方授权书',
        dataIndex: 'other_side_certificate',
        width: 80,
        align: 'left',
        customRender: ({ record }) => {
          return record.other_side_certificate?.url ? '已上传': '未上传';
        },
      },
      {
        title: '创建时间',
        dataIndex: 'created_at',
        width: 140,
        customRender: ({ record }) => {
          return formatToDateTime(record.created_at);
        },
      },
    ];

    const [register] = useModalInner((data) => {
      searchInfo.partner = data.record.partner.id;
      reload();
    });

    const searchInfo = reactive({
      partner: null,
    });

    const [registerTable, { reload }] = useTable({
      canResize: true,
      api: getConnectionList,
      columns,
      searchInfo: searchInfo,
      showTableSetting: false,
      bordered: true,
      showIndexColumn: true,
      immediate: false,
    });
  
    const selectTable = ref<InstanceType<typeof BasicTable> | undefined>();
  
    const onFullscreen = async () => {
      await nextTick();
      selectTable.value?.redoHeight();
    };
  </script>